<template>
    <el-dialog :visible.sync="open" width="75%" append-to-body>
      <div slot="title" class="dialog-title">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="查看用户" name="1"></el-tab-pane>
        </el-tabs>
      </div>
  
      <el-row class="margin-top-sm padding-left padding-right height500">
        <el-col :span="24">
          <div>
            <div class="back_wapper margin-top-xs">授权用户姓名</div>
            <div class="back_wapper back_height wapper-bt margin-top-xs flex flex-wrap"
              style="background-color: #FFFFFF;padding:0">
              <div class="margin-left" v-for="item in form" :key="item.id">{{ item.userName }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button v-preventReClick type="primary" @click="open = false">确 定</el-button>
        <el-button v-preventReClick @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </template>
  <script>

  import {
    groupRoleUsers
  } from "@/api/bpm/userGroup";
  export default {
    props: {
      // list:{
      //     type:Array,
      //     default:[]
      // }
    },
    data() {
      return {
        open: false,
        activeName: "1",
        form: {},
        role: {},
        list: [],
        id: undefined,
      }
    },
    methods: {
      init(id) {
        this.activeName = '1'
        this.open = true;
        this.id = id
        this.handleClick(this.activeName)
      },
      //切换
      async handleClick() {
        console.log(this.activeName);
        const num = this.activeName
        if (!this.id) return this.$message.error('暂未查询到角色')
        const { id } = this
        let { data } = await groupRoleUsers({ id: id })
        console.log(data, '---11')
        this.form = data;
      },
    },
    created() { }
  };
  </script>
  <style scoped lang="scss">
  .height500 {
    height: 400px;
  }
  
  ::v-deep .el-dialog__header {
    border-bottom: none
  }
  
  .back_wapper {
    background-color: #f8f8f9;
    border: 1px solid #dfe6ec;
    color: #515a6e;
    height: 40px;
    font-size: 13px;
    padding: 0 20px;
    line-height: 40px;
  }
  
  .back_height {
    height: auto;
  }
  
  .wapper {
    background-color: #FFFFFF;
    border-bottom: 0;
  
    >div:first-child {
      width: 100px;
      border-right: 1px solid #dfe6ec;
      padding: 0 20px 0 0px;
    }
  }
  
  .wapper-bt {
    border-bottom: 1px solid #dfe6ec !important;
  }</style>